<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<article th:fragment="bookModal">
    <!-- 登录模态框（Modal） -->
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="loginModalLabel">
                        用户登录
                    </h4>
                </div>
                <div class="modal-body">
                    <!--登录的form表单-->
                    <form id="loginForm" class="form-horizontal" role="form" action="">
                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
                                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                            </div>
                            <div class="col-sm-3" id="userTip" style="padding-top: 10px; display: none">
                                <label class="alert-danger">用户名不存在</label>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-5">
                                <input type="password" class="form-control" name="password" placeholder="请输入密码">
                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                            <div class="col-sm-3" id="pwdTip" style="padding-top: 10px; display: none">
                                <label class="alert-danger">密码不正确</label>
                            </div>
                        </div>

                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">验证码</label>
                            <div class="col-sm-5">
                                <p class="txtL txt">
                                    <input class="code form-control" type="text"  name="code" id="code" value="" placeholder="请输入验证码">
                                    <img  id="mycode" th:src="@{/getCode}" height="34px">
                                </p>
                                <p style="font-size: 15px">
                                    <a href="javascript:refreshCode()" >看不清? 换一张</a>
                                </p>

                            </div>
                            <div class="col-sm-3" id="codeTip" style="padding-top: 10px; display: none">
                                <label class="alert-danger">验证码不正确</label>
                            </div>
                        </div>

                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">角色</label>
                            <div class="col-sm-5">
                                <input type="radio" name="sex" value="user" title="普通用户" checked>普通用户
                                <input type="radio" name="sex" value="admin " title="管理员" >管理员
                            </div>
                        </div>

                        <!--                        <div class="form-group">
                                                    <div class="col-sm-offset-2 col-sm-10">
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="checkbox">请记住我
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>-->
                        <div class="modal-footer">
                           <!-- <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->
                            <a th:href="@{/user/forgetPwd}" class="btn-default">忘记密码？</a>
                            <input type="button" class="btn btn-primary" value="登录"  th:onclick="|login()|">
                            <a href="#" data-toggle="modal" class="btn btn-info" id="emailLoginBtn"  data-target="#emailLoginModal">邮箱登录>></a>
                        </div>
                    </form>
                    <!--form结束-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
    </div>
    <!-- 邮箱登录模态框 -->
    <div class="modal fade" id="emailLoginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="emailLoginModalLabel">
                        邮箱登录
                    </h4>
                </div>
                <div class="modal-body">
                    <!--邮箱登录的form表单-->
                    <form id="emailLoginForm" class="form-horizontal" role="form" action="">
                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" name="username" id="emailLogin" placeholder="请输入邮箱" th:onblur="|checkEmail(this)|">
                                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                            </div>
                            <div class="col-sm-3" id="emailTip" style="padding-top: 10px; display: none">
<!--                                <label class="alert-danger" id="noEmail">邮箱不存在</label>-->
                            </div>
                        </div>

                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label" style="padding-right: 10px;">邮箱验证码</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="inputCode" disabled="disabled" placeholder="">
                                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                            </div>
                            <a href="#" class="btn btn-info" id="sendBtn" th:onclick="sendCode()">发送验证码</a>
                        </div>
                        <div class="modal-footer">
                            <input type="button" class="btn btn-primary" value="登录" th:onclick="|doEmailLogin()|">
                        </div>
                    </form>
                    <!--form结束-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
    </div>
    <!-- 注册modal end/.modal -->
    <div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="regModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="regModalLabel">
                        用户注册
                    </h4>
                </div>
                <div class="modal-body">
                    <!--register的form表单-->
                    <form id="regForm" action="" class="form-horizontal" role="form">
                        <div class="form-group has-feedback">
                            <label for="firstname" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-5">
                                <input type="text" name="username" class="form-control" id="regUsername" required placeholder="请输入用户名"
                                       th:onblur="|checkUser(this)|">
                                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                            </div>
                            <div id="msg" class="col-sm-3" style="padding-top: 10px; display: none">
                                <label class="alert-danger" id="tip">用户名不合法</label>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <label for="lastname" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-5">
                                <input type="password" name="password" id="regPwd" class="form-control" placeholder="请输入密码"
                                       minlength="6"
                                       maxlength="8">
                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                            <!--<div class="col-sm-3" style="padding-top: 10px;">
                                <label class="alert-danger">密码不正确</label>
                            </div>-->
                        </div>
<!--                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">确认密码</label>
                            <div class="col-sm-5">
                                <input type="password" class="form-control" id="lastname2" minlength="6" maxlength="8"
                                       placeholder="和密码保持一致">
                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                            </div>
                        </div>-->

                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-5">
                                <input type="email" name="email" th:onblur="|checkRegEmail()|" class="form-control" id="email" placeholder="请输入邮箱">
                                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                            </div>
                        </div>

                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">电话号码</label>
                            <div class="col-sm-5">
                                <input type="tel" name="phone" id="regTel" class="form-control" placeholder="请输入电话号码">
                                <span class="glyphicon glyphicon-earphone form-control-feedback"></span>
                            </div>
                        </div>

                        <div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">学校</label>
                            <div class="col-sm-5">
                                <input type="text" name="school" id="regSchool" class="form-control" placeholder="请输入学校">
                                <span class="glyphicon glyphicon-home form-control-feedback"></span>
                            </div>
                        </div>

                        <!--<div class="form-group has-feedback">
                            <label class="col-sm-2 control-label">地址</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control"  placeholder="请输入收货">
                                <span class="glyphicon glyphicon-home form-control-feedback"></span>
                            </div>
                        </div>
    -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <input type="button" class="btn btn-primary" value="注册" th:onclick="|register()|">
                        </div>
                    </form>
                    <!--form结束-->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
    </div>
</article>

